<template>
	<div>
		<div>
			<div class="new-modal-title" style="z-index: 11; font-size: 16px; position: fixed;  width: 100%;"><i class="modal-return ion-chevron-left" @click="$router.go(-1)"></i>{{pageTitle}}</div>
			<div class="page-content padding-top" style="position: relative; height: auto; overflow-y: auto; padding-top: 44px;">
				<div class="filter-box weui-flex">
					<div class="weui-flex-item" @click="sort(true)">{{sortJson.sortTitle || '默认排序'}}</div>
					<div class="weui-flex-item" @click="filterBrand">{{((brandJson.brandName || '')+(brandJson.seriesName || '')+(brandJson.modelName || '')) || '品牌'}}</div>					
					<div class="weui-flex-item" @click="filterPrice">{{priceJson.title || '价格'}}</div>
					<div class="weui-flex-item" @click="shopStateShow=true">{{'状态'}}</div>
					<div class="weui-flex-item" @click="shopScreen=true">{{'筛选'}}</div>
				</div>
				<car-options :carsList="carsList" :status="true" ></car-options>
				<div v-if="loadingEnd"><div style="padding: 15px; width: 100%; text-align: center; color: #999;">没有更多数据</div></div>
				<div style="padding:15px 0; text-align: center; line-height: 24px;" v-else ><img src="static/images/loading-spinning-bubbles.svg" width="24" height="24" style="vertical-align: middle;" />
  			<span>拼命加载中...</span></div>
				
			</div>
		</div>
		<transition enter-active-class="animated fadeInRight" leave-active-class="animated fadeOutRight">
			<keep-alive>
				<screen-modal v-if="shopScreen" @cancel="cancel"></screen-modal>
			</keep-alive>
		</transition>
		<transition enter-active-class="animated fadeInRight" leave-active-class="animated fadeOutRight">
			<keep-alive>
				<screen-price v-if="showPrice" @cancel="cancel2"></screen-price>
			</keep-alive>
		</transition>
		<transition enter-active-class="animated fadeInRight" leave-active-class="animated fadeOutRight">
			<keep-alive>
				<screen-state v-if="shopStateShow" :params="carStateJson" @cancel="cancel3"></screen-state>
			</keep-alive>
		</transition>
	</div>
</template>
<script>
	import sortModalHang from '../sort/sort_hang.vue'
	import sortModalApply from '../sort/sort_apply.vue'
	import sortModalLibrary from '../sort/sort_library.vue'
	import sortModalReserve from '../sort/sort_reserve.vue'
	import sortModalSale from '../sort/sort_sale.vue'

	import screenState from 'src/assembly/screenState.vue'
	import screenModal from 'src/assembly/screenRange.vue'
	import screenPrice from 'src/assembly/screenPrice.vue'
	import brandModal from '../sort/brand.vue'
	import priceModal from '../sort/price.vue'
	import filterModal from '../sort/filter.vue'
	import { bus } from 'bus.js'
	export default {
		name:'cars',
		data() {
			return {
				carsList: [],
				pageTitle: '库存管理',
				pageNo: 0,
				imgUrl: imgUrl,
				brandJson: {},
				sortJson: {},
				priceJson: {},
				carStateJson: {},
				shopScreen: false,
				rangeJson: {
					vage: {},
					mileage: {},
					oage: {},
				},
				brandModal: null,
				showPrice: false,
				shopId: sess.get('userSession').shopId,
				sortFn: '',
				shopStateShow: false,
				shopState: {},
				loading:false,
				loadingEnd:false,
			}
		},
		components: {
			screenModal,
			screenPrice,
			screenState,
		},
		mounted() {
			$modal.fromComponent(sortModalHang, {
				title: '排序',
				theme: 'assertive',
				onHide: () => {
					// console.log();
				}
			}).then((modal) => {
				this.sortModalHang = modal;
			});
			$modal.fromComponent(sortModalApply, {
				title: '排序',
				theme: 'assertive',
				onHide: () => {
					// console.log();
				}
			}).then((modal) => {
				this.sortModalApply = modal;
			});
			$modal.fromComponent(sortModalLibrary, {
				title: '排序',
				theme: 'assertive',
				onHide: () => {
					// console.log();
				}
			}).then((modal) => {
				this.sortModalLibrary = modal;
			});
			$modal.fromComponent(sortModalReserve, {
				title: '排序',
				theme: 'assertive',
				onHide: () => {
					// console.log();
				}
			}).then((modal) => {
				this.sortModalReserve = modal;
			});
			$modal.fromComponent(sortModalSale, {
				title: '排序',
				theme: 'assertive',
				onHide: () => {
					// console.log();
				}
			}).then((modal) => {
				this.sortModalSale = modal;
			});

			$modal.fromComponent(brandModal, {
				title: '选择品牌',
				theme: 'assertive',
				onHide: () => {
					// console.log();
				}
			}).then((modal) => {
				this.brandModal = modal;
			});

			$modal.fromComponent(priceModal, {
				title: '价格',
				theme: 'assertive',
				onHide: () => {
					// console.log();
				}
			}).then((modal) => {
				this.priceModal = modal;
			});

			$modal.fromComponent(filterModal, {
				title: '筛选',
				theme: 'assertive',
				onHide: () => {
					// console.log();
				}
			}).then((modal) => {
				this.filterModal = modal;
			});
			this.barScroll()

		},
		created() {
			this.carStateJson.carOrderState = this.$route.query.carOrderState;
			this.carStateJson.carStockState = this.$route.query.carStockState;
			this.pageTitle = this.$route.query.title;

			bus.$on('brandJson', (obj) => {
				this.brandJson = obj
				this.brandModal.hide();
				bus.$emit('hideAll');
				this.onRefresh();
			})
			bus.$off('sortJson')
			bus.$on('sortJson', (obj) => {
				this.sortJson = obj;
				this.sortModalSale.hide();
				this.sortModalReserve.hide();
				this.sortModalApply.hide();
				this.sortModalLibrary.hide();
				this.sortModalHang.hide();
				this.onRefresh();
			})
			bus.$on('priceJson', (obj) => {
				this.priceJson = obj;
				this.priceModal.hide();
				this.onRefresh();
			})
			this.sort(false)
			this.onInfinite()
		},
		destroyed() {
			if(this.sortModalSale)
				$modal.destroy(this.sortModalSale)
			if(this.sortModalReserve)
				$modal.destroy(this.sortModalReserve)
			if(this.sortModalLibrary)
				$modal.destroy(this.sortModalLibrary)
			if(this.sortModalApply)
				$modal.destroy(this.sortModalApply)
			if(this.sortModalHang)
				$modal.destroy(this.sortModalHang)
			if(this.brandModal)
				$modal.destroy(this.brandModal)
			if(this.priceModal)
				$modal.destroy(this.priceModal)
			if(this.filterModal)
				$modal.destroy(this.filterModal)
		},
		methods: {
			cancel(val) {
				this.shopScreen = false
				if(val) {
					if(val.shopId) {
						this.shopId = val.shopId
					}

					this.getParams(val)
				}
			},
			cancel2(val) {
				this.showPrice = false
				if(val) {
					this.priceJson.start = val.min
					this.priceJson.end = val.max
					this.onRefresh();
				}
			},
			cancel3(val) {
				this.shopStateShow = false
				if(val) {
					this.shopState = val
					this.onRefresh();
				}
			},
			sort(val) {
				switch(this.carStateJson.carStockState || this.carStateJson.carOrderState) {
					case '0':
						if(val) {
							this.sortModalHang.show()
						} else {
							this.sortJson = {
								sortName: 'CAR_CREATE_TIME',
								sortMode: 'DESC',
								sortTitle: '最近更新'
							}
						}
						break
					case '10':
						if(val) {
							this.sortModalApply.show()
						} else {
							this.sortJson = {
								sortName: 'CAR_STOCK_TIME',
								sortMode: 'DESC',
								sortTitle: '最近申请'
							}
						}
						break
					case '20':
						if(val) {
							this.sortModalLibrary.show()
						} else {
							this.sortJson = {
								sortName: 'CAR_STOCK_TIME',
								sortMode: 'DESC',
								sortTitle: '最近入库'
							}
						}
						break
					case '1':
						if(val) {
							this.sortModalReserve.show()
						} else {
							this.sortJson = {
								sortName: 'ORDER_CREATE_TIME',
								sortMode: 'DESC',
								sortTitle: '最新预定'
							}
						}
						break
					case '40':
						if(val) {
							this.sortModalSale.show()
						} else {
							this.sortJson = {
								sortName: 'SALE_CREATE_TIME',
								sortMode: 'DESC',
								sortTitle: '最近成交'
							}
						}
						break
					default:
						return false
						break
				}
			},
			filterBrand() {
				this.brandModal.show();
			},
			filterPrice() {
				this.showPrice = true
				//				this.priceModal.show();
			},
			filterBox() {
				this.filterModal.show();
			},
			getParams(obj) {
				this.rangeJson = obj;
				this.onRefresh();
			},
			onRefresh() {
				var _this = this;
				_this.loadingEnd = false
				this.pageNo = 1;
				axios.get(baseUrl + '/controller/getCarList', {
						params: {
							pageIndex: 1,
							pageSize: 10,
							marketId: sess.get('userSession').marketId,
							brandId: this.brandJson.brandId,
							seriesId: this.brandJson.seriesId,
							modelId: this.brandJson.modelId,
							orderColunm: this.sortJson.sortName,
							orderMode: this.sortJson.sortMode,
							fromRetailPrice: this.priceJson.start,
							toRetailPrice: this.priceJson.end,
							fromCarAge: this.rangeJson.vage.min,
							toCarAge: this.rangeJson.vage.max,
							fromMileage: this.rangeJson.mileage.min,
							toMileage: this.rangeJson.mileage.max,
							fromCreateTime: this.rangeJson.oage.min,
							toCreateTime: this.rangeJson.oage.max,
							carOutColor: this.rangeJson.color,
							carTypeId: this.rangeJson.type,
							carEnviron: this.rangeJson.carEnviron,
							carOrderState:this.shopState.carOrderState,
							carSaleState:this.shopState.carSaleState,
							carDetectState:this.shopState.carDetectState,
							carBargainPriceState:this.shopState.carBargainPriceState,
							carPledgeState:this.shopState.carPledgeState,
						}
					})
					.then(function(res) {
						var resArr = res.data.result;
						if(resArr.length == 0) {							
							_this.loadingEnd = true
							_this.carsList = []
							return;
						}else if(resArr.length<10){
							_this.loadingEnd = true
						}
						
						_this.carsList = resArr;
						
					})
			},
			onInfinite() {
				var _this = this;
				this.loading = false
				this.pageNo = this.pageNo + 1;
				axios.get(baseUrl + '/controller/getCarList', {
						params: {
							carOrderState: this.carStateJson.carOrderState, //预订状态（1：已预订、0：未预订）
							carStockState: this.carStateJson.carStockState, //库存状态 0 初始化 10 入库中 20 入库 30 出库中 40 出库
							pageIndex: this.pageNo,
							pageSize: 10,
							marketId: sess.get('userSession').marketId,
							shopId: this.shopId,
							brandId: this.brandJson.brandId,
							seriesId: this.brandJson.seriesId,
							modelId: this.brandJson.modelId,
							orderColunm: this.sortJson.sortName,
							orderMode: this.sortJson.sortMode,
							fromRetailPrice: this.priceJson.start,
							toRetailPrice: this.priceJson.end,
							fromCarAge: this.rangeJson.vage.min,
							toCarAge: this.rangeJson.vage.max,
							fromMileage: this.rangeJson.mileage.min,
							toMileage: this.rangeJson.mileage.max,
							fromCreateTime: this.rangeJson.oage.min,
							toCreateTime: this.rangeJson.oage.max,
							carOutColor: this.rangeJson.color,
							carTypeId: this.rangeJson.type,
							carEnviron: this.rangeJson.carEnviron,
							carSaleState: this.shopState.carSaleState,
							carDetectState: this.shopState.carDetectState,
							carBargainPriceState: this.shopState.carBargainPriceState,
							carPledgeState:this.shopState.carPledgeState,
						}
					})
					.then(function(res) {
						var resArr = res.data.result;
						if(resArr.length == 0) {
							_this.loadingEnd = true
							_this.loading = true
							return;
						}else if(resArr.length<10){
							_this.loadingEnd = true
						}				
						_this.carsList = _this.carsList.concat(resArr)
						_this.loading = true
					})
			},
			barScroll(){
				let heightWin = window.outerHeight
				let _this = this
				window.addEventListener('scroll',()=>{					
					if(_this.loading&&!_this.loadingEnd){
						let scrTop = document.documentElement.scrollTop					
						let heightDom = document.body.scrollHeight-heightWin-44
						if(scrTop>=heightDom)
							_this.onInfinite()
					}						
				})
			}
		}
	}
</script>
<style scoped>
	.filter-box {
		width: 100%;
		height: 40px;
		line-height: 40px;
		background-color: #fff;
	}
	
	.filter-box div {
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>